<template>
  <div class="reservation-manage-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>预约管理</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleRefresh"
        >刷新</el-button>
      </div>
      
      <!-- 搜索区域 -->
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="预约类型">
          <el-select @change="getReservationList" v-model="queryParams.type" placeholder="请选择预约类型">
            <el-option label="展览预约" value="EXHIBITION"></el-option>
            <el-option label="解说预约" value="GUIDE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option label="待确认" value="PENDING"></el-option>
            <el-option label="已确认" value="APPROVED"></el-option>
            <!-- <el-option label="已完成" value="COMPLETED"></el-option> -->
            <el-option label="已取消" value="CANCELED"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="用户名">
          <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 表格区域 -->
      <el-table
        :data="reservationList"
        border
        stripe
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <!-- <el-table-column prop="reservationNo" label="预约编号" align="center"></el-table-column> -->
        <el-table-column prop="userName" label="预约用户" align="center"></el-table-column>
        <!-- <el-table-column prop="type" label="预约类型" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.type === 'EXHIBITION'">展览预约</el-tag>
            <el-tag type="success" v-else-if="scope.row.type === 'GUIDE'">解说预约</el-tag>
            <el-tag v-else>未知</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="exhibitionName" label="预约展览" align="center"></el-table-column>
        <el-table-column v-if="queryParams.type==='GUIDE'" prop="guideName" label="预约解说" align="center"></el-table-column>
        <el-table-column prop="reservationDate" label="预约时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.reservationDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 'PENDING'">待确认</el-tag>
            <el-tag type="success" v-else-if="scope.row.status === 'APPROVED'">已确认</el-tag>
            <el-tag type="info" v-else-if="scope.row.status === 'CANCELED'">已取消</el-tag>
            <!-- <el-tag type="danger" v-else-if="scope.row.status === 'REJECTED'">已取消</el-tag> -->
            <el-tag v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="300" align="left">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDetail(scope.row)"
              icon="el-icon-view"
            >详情</el-button>
            <el-button
              size="mini"
              type="success"
              v-if="scope.row.status === 'PENDING'"
              @click="handleConfirm(scope.row)"
              icon="el-icon-check"
            >确认</el-button>
            <el-button
              size="mini"
              type="danger"
              v-if="scope.row.status === 'PENDING' || scope.row.status === 'CONFIRMED'"
              @click="handleCancel(scope.row)"
              icon="el-icon-close"
            >取消</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      ></el-pagination>
      
      <!-- 预约详情对话框 -->
      <el-dialog title="预约详情" :visible.sync="detailDialogVisible" width="50%">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="预约编号">{{ reservationDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="预约用户">{{ reservationDetail.userName }}</el-descriptions-item>
          <el-descriptions-item label="预约类型">
            <el-tag type="primary" v-if="reservationDetail.type === 'EXHIBITION'">展览预约</el-tag>
            <el-tag type="success" v-else-if="reservationDetail.type === 'GUIDE'">解说预约</el-tag>
            <el-tag v-else>未知</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="预约对象">{{ reservationDetail.exhibitionName }}</el-descriptions-item>
          <el-descriptions-item label="预约时间">{{ reservationDetail.timeSlot }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag v-if="reservationDetail.status === 'PENDING'">待确认</el-tag>
            <el-tag type="success" v-else-if="reservationDetail.status === 'APPROVED'">已确认</el-tag>
            <!-- <el-tag type="info" v-else-if="reservationDetail.status === 'COMPLETED'">已完成</el-tag> -->
            <el-tag type="danger" v-else-if="reservationDetail.status === 'CANCELED'">已取消</el-tag>
            <el-tag type="danger" v-else-if="reservationDetail.status === 'REJECTED'">已取消</el-tag>
            <el-tag v-else>未知</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ reservationDetail.phone }}</el-descriptions-item>
          <el-descriptions-item label="参观人数">{{ reservationDetail.visitorCount }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2">{{ reservationDetail.remark || '无' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ reservationDetail.createTime | formatDate }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ reservationDetail.updateTime | formatDate }}</el-descriptions-item>
        </el-descriptions>
        <div slot="footer" class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReservationManage',
  data() {
    return {
      // 查询参数
      queryParams: {
        type: 'EXHIBITION',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      // 预约列表
      reservationList: [],
      // 总记录数
      total: 0,
      // 加载状态
      loading: false,
      // 详情对话框可见性
      detailDialogVisible: false,
      // 预约详情
      reservationDetail: {}
    }
  },
  created() {
    // 获取预约列表
    this.getReservationList()
  },
  watch: {
    // 监听查询参数变化
    queryParams: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.getReservationList()
        }
      },
      deep: true
    }
  },
  filters: {
    // 日期格式化过滤器
    formatDate(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  },
  methods: {
    // 获取预约列表
    async getReservationList() {
      this.loading = true
      try {
        if (this.queryParams.type === 'EXHIBITION'){
          const { data: res } = await this.$http.get('/exhibition-reservation/list', {
            params:{
              status:this.queryParams.status,
              pageNum:this.queryParams.pageNum,
              pageSize:this.queryParams.pageSize
            } 
          })
          if (res.code !== 200) {
            return this.$message.error(res.message || '获取预约列表失败')
          }
          this.reservationList = res.data.records
          this.total = res.data.total
        } else {
          const { data: res } = await this.$http.get('/guide-reservation/list', {
            params:{
              status:this.queryParams.status,
              pageNum:this.queryParams.pageNum,
              pageSize:this.queryParams.pageSize
            } 
          })
          if (res.code !== 200) {
            return this.$message.error(res.message || '获取预约列表失败')
          }
          this.reservationList = res.data.records
          this.total = res.data.total
        }
        
        
      } catch (error) {
        console.error('获取预约列表失败', error)
        this.$message.error('获取预约列表失败')
      } finally {
        this.loading = false
      }
    },
    // 处理查询
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getReservationList()
    },
    // 重置查询
    resetQuery() {
      this.queryParams = {
        type: 'EXHIBITION',
        status: '',
        pageNum: 1,
        pageSize: 10
      }
      this.getReservationList()
    },
    // 处理刷新
    handleRefresh() {
      this.getReservationList()
    },
    // 处理页码变化
    handleCurrentChange(pageNum) {
      this.queryParams.pageNum = pageNum
      this.getReservationList()
    },
    // 处理每页条数变化
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.queryParams.pageNum = 1
      this.getReservationList()
    },
    // 处理详情
    async handleDetail(row) {
      try {
        if (this.queryParams.type === 'EXHIBITION'){
          const { data: res } = await this.$http.get(`/exhibition-reservation/${row.id}`)
          if (res.code !== 200) {
            return this.$message.error(res.message || '获取预约详情失败')
          }
          this.reservationDetail = res.data
          this.reservationDetail.type = 'EXHIBITION'
          this.detailDialogVisible = true
        } else {
          const { data: res } = await this.$http.get(`/guide-reservation/${row.id}`)
          if (res.code!== 200) {
            return this.$message.error(res.message || '获取预约详情失败')
          }
          this.reservationDetail = res.data
          this.reservationDetail.type = 'GUIDE'
          this.detailDialogVisible = true
        }
      } catch (error) {
        console.error('获取预约详情失败', error)
        this.$message.error('获取预约详情失败')
      }
    },
    // 处理确认
    handleConfirm(row) {
      this.$confirm('确认此预约?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          if (this.queryParams.type === 'EXHIBITION'){
            const { data: res } = await this.$http.put(`/exhibition-reservation/confirm/${row.id}`)
            if (res.code !== 200) {
              return this.$message.error(res.message || '确认预约失败')
            }
            this.$message.success('确认预约成功')
            this.getReservationList()
          } else {
            const { data: res } = await this.$http.put(`/guide-reservation/confirm/${row.id}`)
            if (res.code!== 200) {
              return this.$message.error(res.message || '确认预约失败')
            }
            this.$message.success('确认预约成功')
            this.getReservationList()
          }
        } catch (error) {
          console.error('确认预约失败', error)
          this.$message.error('确认预约失败')
        }
      }).catch(() => {
        // 取消操作
      })
    },
    // 处理取消
    handleCancel(row) {
      this.$confirm('确认取消此预约?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          if (this.queryParams.type === 'EXHIBITION'){
            const { data: res } = await this.$http.put(`/exhibition-reservation/cancel/${row.id}`)
            if (res.code !== 200) {
              return this.$message.error(res.message || '取消预约失败')
            }
            this.$message.success('取消预约成功')
            this.getReservationList()
          } else {
            const { data: res } = await this.$http.put(`/guide-reservation/cancel/${row.id}`)
            if (res.code!== 200) {
              return this.$message.error(res.message || '取消预约失败')
            }
            this.$message.success('取消预约成功')
            this.getReservationList()
          }
        } catch (error) {
          console.error('取消预约失败', error)
          this.$message.error('取消预约失败')
        }
      }).catch(() => {
        // 取消操作
      })
    }
  }
}
</script>

<style scoped>
.reservation-manage-container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>